<!doctype html>
<html lang="en">
<head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <title>白嫖电影</title>

    <!-- === CSS === -->
    <link rel="stylesheet" href="bootstrap-4.1.1-dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="css/materialize.min.css">
    <link rel="stylesheet" href="css/owl.carousel.min.css">
    <link rel="stylesheet" href="css/ionicons.css">
    <link rel="stylesheet" href="css/app.css">

    <style>
        .navbar-form{
            position: relative;
            margin-top: 60px;
            width: 100%;

        }

        .movie-search-items{
            color: #fdfdfd;
            border: 1px solid #ffffff;
            border-radius: 12px;
        }

        #particle-container {
            position: absolute;
            height: 100%;
            width: 100%;
        }

        #particle-container canvas {
            display: block;
            background: #17181A;
        }

        dl dd,dl dt{
            padding: 10px 20px;
        }

        dl dt{
            text-decoration: underline;
        }

        dl dd{
            color: #dadada;
            text-indent: 2em;
            #background-color: lightgrey;
        }

        .movie-login-form , .movie-reg-form{
            width: 60%;
            height: 400px;
            margin: 0 auto;
            border: 1px solid #999999;
            border-radius: 12px;
            color: #fdfdfd;
        }

        .movie-login-form form{
            width: 70%;
            height: 390px;
            position: relative;
            top: 20px;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            outline: 2px solid lightpink;
        }

        .movie-reg-form form{
            width: 70%;
            height: 390px;
            position: relative;
            top: 12px;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;
            outline: 2px solid lightpink;
        }

        .movie-login-form form .form-group input{
           height: 20px;
           color: #fefefe;border-color:#99CCCC;
        }

        .movie-reg-form form .form-group input{
            height: 20px;
            color: #fefefe;border-color:#99CCCC;
        }

        .movie-login-form form .form-group label{
            font-size: large;
            color: #fefefe;
        }

        .movie-reg-form form .form-group label{
            font-size: large;
            color: #fefefe;
        }

        .movie-login-form #rememberme{
            pointer-events: auto;
            box-sizing: unset;
        }

        .materialize-toast {
            position: relative;
            left: -400px;
            /*position: absolute;*/
            width: 480px;
            height: 60px;
            margin: 0px auto;
        }
    </style>
</head>
<body>

<header class="header">
    <nav class="navbar navbar-expand-sm fixed-top">
        <!--导航栏开始-->
        <div class="container">
            <a class="navbar-brand" href="index.html"><img class="header-logo"
                                                           src="images/small-image/moviez-logo.png" alt="Main Logo">
            </a>
            <button class="navbar-toggler navbar-toggler" type="button" data-toggle="collapse"
                    data-target="#example-navbar" aria-controls="navbarSupportedContent" aria-expanded="false"
                    aria-label="Toggle navigation">
                <i class="ion nav-more ion-android-menu"></i></button>
            <div class="collapse navbar-collapse" id="example-navbar" data-nav-image="assets/img/blurred-image-1.jpg">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item"><a class="nav-link active" href="index.html">首页</a></li>
                    <li class="nav-item"><a class="nav-link" href="list.html">电影</a></li>
                    <li class="nav-item"><a class="nav-link" href="javascript:void(0);">影评</a></li>
                    <li class="nav-item"><a class="nav-link" href="search.html">搜索</a></li>
                    <li class="nav-item dropdown">
                        <a class="nav-link dropdown-toggle" href="#" id="1" data-toggle="dropdown" aria-haspopup="true"
                           aria-expanded="false">我的</a>
                        <div class="dropdown-menu" aria-labelledby="1">
                            <a class="dropdown-item" href="javascript:void(0);">账号管理</a>
                            <a class="dropdown-item" href="login.html">注销</a>

                        </div>
                    </li>
                    <li class="nav-item dropdown cart">
                        <a href="#" class="nav-link dropdown-toggle " id="navbarDropdownMenuLink"
                           data-toggle="dropdown">
                            <i class="ion ion-android-cart" aria-hidden="true"></i>
                            <span class="cart-number">0</span>
                        </a>
                        <div class="dropdown-menu dropdown-menu-right" aria-labelledby="navbarDropdownMenuLink">
                            <a class="dropdown-item" href="#">购物车 <span class="text-right">0</span></a>
                        </div>
                    </li>
                </ul>
            </div>
        </div>
        <!--导航栏结束-->
    </nav>
</header>


<section class="movies movie-5" style="padding-top: 80px">
    <!--下面就是登录背景颗粒化的DIV-->
    <div id="particle-container"></div>
    <div class="container">
        <div class="row">
            <div class="col-12">
                <div class="wrap-movie pt-2">
                    <div class="section-title-wrap">
                        <div class="section-title"></div>
                    </div>
                    <ul class="tabs movies-tabs-1">
                        <li class="tab"><a class="active" style="color: #fefefe" href="#login">登录</a></li>
                        <li class="tab"><a href="#reg" style="color: #fefefe">注册</a></li>
                    </ul>
                    <div id="login" class="">
                        <div>
                           <div class="movie-login-form">
                               <form>
                                   <div class="form-group">
                                       <label for="exampleInputEmail1">用户名</label>
                                       <input type="text" class="form-control" placeholder="请输入注册手机号码"  id="exampleInputEmail1" aria-describedby="emailHelp">
                                       <small id="emailHelp" class="form-text text-muted"></small>
                                   </div>
                                   <div class="form-group">
                                       <label for="exampleInputPassword1">密码</label>
                                       <input type="password" placeholder="请输入密码" class="form-control" id="exampleInputPassword1">
                                   </div>
                                   <div class="form-group">
                                       <img id="randomCodeImg" style="width: 30%;cursor:pointer;" title="看不清楚，点击换一张" onclick="javascript:void(0);" src="images/login/validate_code.png">
                                   </div>
                                   <div class="form-group">
                                       <label for="randomCode">验证码</label>
                                       <input type="text" class="form-control" placeholder="请输入验证码"  id="randomCode" aria-describedby="randomCodeHelp">
                                       <small id="randomCodeHelp" class="form-text text-muted"></small>
                                   </div>
                                   <div class="form-group">

                                       <input type="checkbox" style="text-align: right; width:120px; opacity: 1;" class="form-control" value="" id="rememberme"/>记住我

                                   </div>
                                   <button type="button" style="display: block;width: 100%" class="btn btn-primary" onclick="doLogin()">登录</button>
                               </form>
                           </div>
                        </div>
                    </div>
                    <div id="reg" class="">
                        <div>
                            <div class="movie-reg-form">
                                <form>
                                    <div class="form-group">
                                        <label for="mobile">注册手机</label>
                                        <input type="text" class="form-control" id="mobile" placeholder="请输入注册手机号码" aria-describedby="mobileHelp">
                                        <small id="mobileHelp" class="form-text text-muted"></small>
                                    </div>
                                    <div class="form-group">
                                        <button type="button" class="btn btn-primary" style="color:#666; background-color: #f6f5f5">发送验证码 </button>
                                    </div>
                                    <div class="form-group">
                                        <label for="password">密码</label>
                                        <input type="password" placeholder="请输入密码" class="form-control" id="password">
                                    </div>
                                    <div class="form-group">
                                        <label for="confirmpass">确认密码</label>
                                        <input type="password" placeholder="请输入确认密码" class="form-control" id="confirmpass">
                                    </div>
                                    <div class="form-group">
                                        <label for="validateCode">验证码</label>
                                        <input type="text" class="form-control" id="validateCode" aria-describedby="validateCodeHelp">
                                        <small id="validateCodeHelp" class="form-text text-muted"></small>
                                    </div>
                                    <button type="button" class="btn btn-primary" style="background-color: #E82027" onclick="doReg()">注册</button>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

<!--=== movies 1 ===-->
<section class="movies movie-1">
    <div class="container">
        <div class="row">

        </div>
    </div>
</section>


<!--=== Modal For All Videos ===-->
<div class="modal popup-video fade" id="call-video" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
     aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-body">
                <div class="close" data-dismiss="modal" aria-label="Close"><i class="ion ion-ios-close-outline"></i>
                </div>
                <!-- 16:9 aspect ratio -->
                <div class="embed-responsive embed-responsive-16by9">
                    <iframe class="embed-responsive-item" src="" id="video" allowscriptaccess="always"
                            allowfullscreen></iframe>
                </div>
            </div>
        </div>
    </div>
</div>

<!--=== footer area ===-->
<section class="footer-area">
    <div class="container">
        <div class="row">
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-logo"><img src="images/small-image/moviez-logo.png" alt="footer logo"></div>
                <div class="subscribe">
                    <p>做中国影迷最喜欢的免费电影资源库！<br>我们的口号是：永远白嫖，永不收费！</p>
                </div>

            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-item-title"><h4>商务合作</h4></div>
                <div class="just-links">
                    <ul class="list-unstyled">
                        <li class=""><a href="#">招商引资</a></li>
                        <li class=""><a href="#">意见投诉</a></li>
                        <li class=""><a href="#">我要求片</a></li>
                        <li class=""><a href="#">版权声明</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-item-title"><h4>友情链接</h4></div>
                <div class="just-links">
                    <ul class="list-unstyled">
                        <li class=""><a href="#">豆瓣网</a></li>
                        <li class=""><a href="#">中国电影网</a></li>
                        <li class=""><a href="#">1080影视大全</a></li>
                        <li class=""><a href="#">爱奇艺</a></li>
                        <li class=""><a href="#">牛牛编程</a></li>
                    </ul>
                </div>
            </div>
            <div class="col-lg-3 col-md-4 col-sm-6">
                <div class="footer-item-title"><h4>投资者关系</h4></div>
                <div class="just-links">
                    <ul class="list-unstyled">
                        <li class=""><a href="#">关于我们</a></li>
                        <li class=""><a href="#">公司简介</a></li>
                        <li class=""><a href="#">发展历程</a></li>
                        <li class=""><a href="#">加入我们</a></li>
                        <li class=""><a href="#">联系我们</a></li>
                    </ul>
                </div>
            </div>
            <hr class="d-md-none d-lg-block">
        </div>


        <hr>
        <div class="row">
            <div class="col-12">
                <div class="footer-wrap text-center">
                    <!--ul class="list-inline social-icon">
                        <li class="list-inline-item"><i class="ion ion-social-twitter"></i></li>
                        <li class="list-inline-item"><i class="ion ion-social-linkedin"></i></li>
                        <li class="list-inline-item"><i class="ion ion-social-dribbble-outline"></i></li>
                    </ul-->
                    <div class="footer-tag">2018-2023 &copy; 华清远见 | 作者：西蒙牛</div>
                </div>
                <div style="text-align: center;color: #ccc">
                    [<a href="admin/login.html">后台管理</a>]
                </div>
            </div>
        </div>
    </div>
</section>


<!-- ==== js ==== -->
<script src="js/jquery-2.2.3.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="bootstrap-4.1.1-dist/js/bootstrap.min.js"></script>
<script src="js/owl.carousel.min.js"></script>

<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/materialize/0.98.2/js/materialize.min.js"></script>

<script src="js/app.js"></script>

<!--以下的登录背景颗粒化的类库-->
<script src="https://lf3-cdn-tos.bytecdntp.com/cdn/expire-1-M/particles.js/2.0.0/particles.min.js"></script>
<script src="js/index.js"></script>

<script>

    function doLogin(){
        Materialize.toast('登录成功！', 4000, 'materialize-toast')
    }

    function doReg(){
        Materialize.toast('注册成功！', 4000, 'materialize-toast')
    }
</script>
</body>
</html>
